<template>
  <div>
    <a-modal :title="'交货单详情-' + info.billNo" :visible="visible" :footer="false" @before-open="open" @cancel="handleCancel" :align-center="false" title-align="start" width="1200px" :mask-closable="false">
      <div>
        <a-row style="padding: 0 20px">
          <a-col :span="12">
            <div class="detail-item">
              <div class="label">是否需要扣减库存： </div>
              <div class="value">{{ info.deliveryDeduction ? '需要扣减库存' : '不需要扣减库存' }}</div>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="detail-item">
              <div class="label">交货仓库： </div>
              <div class="value">{{ info.deliveryWarehouseName }}({{ info.deliveryWarehouseCode }})</div>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="detail-item">
              <div class="label">物流方式： </div>
              <div class="value">{{ info.logisticType ? '线下配送' : '快递' }}</div>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="detail-item">
              <div class="label">物流跟踪号： </div>
              <div class="value">{{ info.logisticName }}/{{ info.logisticsTrackNumber }}</div>
            </div>
          </a-col>
        </a-row>
        <div class="title-bar">交货明细</div>
        <a-table class="table-two-line" ref="tableListref" style="width: 1140px" :summary="summary" :span-method="spanMethodAll" :expandable="expandable" :default-expand-all-rows="true" :bordered="false" :columns="tableColumns" :data="[itemInfo]" size="mini" :pagination="false" :scroll="{ y: '500px' }">
          <template #columns>
            <a-table-column v-for="(item, index) of tableColumns" :fixed="item.fixed" :key="index" :align="item.align" :width="item.width" :title="item.title" :data-index="item.dataIndex">
              <template v-if="item.dataIndex == 'img'" #cell="{ record }">
                <!-- <div class="flex-c-sb" style="display: flex; align-items: center"> -->
                <div style="display: flex; align-items: center">
                  <div class="order-w flex">
                    <p>
                      <span class="label">交货单号：</span>
                      <span>{{ record.billNo }}</span>
                    </p>
                    <p style="margin: 0 20px">
                      <span class="label">经销商：</span>
                      <span>{{ record.companyName }}</span>
                    </p>
                    <p>
                      <span class="label"> 交货仓：</span>
                      <span>{{ record.deliveryWarehouseName }}({{ record.deliveryWarehouseCode }})</span>
                    </p>
                    <p style="margin: 0 20px">
                      <span class="label"> 物流方式：</span>
                      <span>{{ record.logisticType == '1' ? '线下配送' : '快递' }}</span>
                    </p>
                    <p>
                      <span class="label"> 物流跟踪号：</span>
                      <span>{{ record.logisticName }}/{{ record.logisticsTrackNumber }}</span>
                    </p>
                  </div>
                </div>
              </template>

              <template #title v-else-if="item.dataIndex == 'deliveryAmt'">
                <a-popover content="生成交货单时填写的交货数量">
                  <p>
                    <span>交货数</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #title v-else-if="item.dataIndex == 'deliveryRealAmt'">
                <a-popover content="经销商签收交货单时实际收到的数量">
                  <p>
                    <span>实际交货数</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #title v-else-if="item.dataIndex == 'deliveryDiffAmt'">
                <a-popover content="交货单签收的实际数量跟交货单数量的差额">
                  <p>
                    <span>交货差额</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #title v-else-if="item.dataIndex == 'warehouseRealAmt'">
                <a-popover content="实际入到仓库的数量">
                  <p>
                    <span>已入库数</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #title v-else-if="item.dataIndex == 'warehouseReturnAmt'">
                <a-popover content="仓库签收入库单时遇到次品退回的数量">
                  <p>
                    <span>退回数</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #title v-else-if="item.dataIndex == 'price'">
                <a-popover content="采购单填写的单价">
                  <p>
                    <span>采购单价</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #title v-else-if="item.dataIndex == 'deliveryValue'">
                <a-popover content="实交金额=单价*实际交货数">
                  <p>
                    <span>实交金额</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #title v-else-if="item.dataIndex == 'inventoryValue'">
                <a-popover content="入库金额=单价*已入库数">
                  <p>
                    <span>入库金额</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
            </a-table-column>
          </template>
          <template #expand-row="{ record }">
            <a-table class="table-singe-line" row-class="child-row" :show-header="false" :bordered="false" :columns="tableColumns" :data="record.billItems" size="mini" :pagination="false">
              <template #columns>
                <a-table-column v-for="(item, index) of tableColumns" :key="index" :fixed="item.fixed" :align="item.align" :width="item.width" :title="item.title" :data-index="item.dataIndex">
                  <template v-if="item.dataIndex == 'img'" #cell="option">
                    <ImgPopover :src="option.record.productImg">
                      <template #con>
                        <a-image width="40" height="40" fit="contain" :src="option.record.productImg" />
                      </template>
                    </ImgPopover>
                  </template>
                  <template v-else-if="item.dataIndex == 'productName'" #cell="option">
                    <TextLimit :rows="2" position="top">{{ option.record.productName }}</TextLimit>
                  </template>

                  <template v-else-if="item.dataIndex == 'sku'" #cell="option">
                    <TextLimit :rows="1">{{ option.record.sku || '--' }}</TextLimit>
                  </template>
                  <template v-else-if="item.dataIndex == 'ssku'" #cell="option">
                    <TextLimit :rows="1">{{ option.record.ssku || '--' }}</TextLimit>
                  </template>

                  <template v-else-if="item.dataIndex == 'productSpecs'" #cell="option">
                    <TextLimit position="top">{{ getSpecName(option.record) }}</TextLimit>
                  </template>

                  <template v-else-if="item.dataIndex == 'gmtPlanDelivery'" #cell="option">
                    <div>{{ $setTime(option.record.gmtPlanDelivery, 'YYYY/MM/DD') }}</div>
                    <div v-if="option.record.gmtPlanDelivery">
                      <div style="color: red" v-if="!toCheckDay(option.record.gmtPlanDelivery).type">超时{{ toCheckDay(option.record.gmtPlanDelivery).day }}天</div>
                      <div class="highlight" v-else>剩余{{ toCheckDay(option.record.gmtPlanDelivery).day }}天</div>
                    </div>
                  </template>

                  <template v-else-if="item.dataIndex == 'rate'" #cell="option">
                    <TextLimit :rows="1">{{ option.record.rate }}%</TextLimit>
                  </template>
                  <template v-else-if="item.dataIndex == 'price'" #cell="option">
                    <div class="highlight">{{ option.record.priceType ? '含税' : '不含税' }}</div>
                    <div>￥{{ option.record.price }}</div>
                  </template>
                  <template v-else-if="item.dataIndex == 'deliveryValue'" #cell="option">
                    <div class="highlight">{{ option.record.priceType ? '含税' : '不含税' }}</div>
                    <div>￥{{ option.record.deliveryValue }}</div>
                  </template>
                  <template v-else-if="item.dataIndex == 'inventoryValue'" #cell="option">
                    <div class="highlight">{{ option.record.priceType ? '含税' : '不含税' }}</div>
                    <div>￥{{ option.record.inventoryValue }}</div>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </template>
          <template #summary-cell="{ column, record, rowIndex }">
            <div>{{ record[column.dataIndex] }}</div>
          </template>
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { getSupplierDeliveryInfo } from '@/api/supplier'
  export default defineComponent({
    props: ['info'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data: any = reactive({
        loading: false,
        itemInfo: {},
        rejectMsg: '',
        showPoper: false,
        tableColumns: [
          {
            title: '图片',
            dataIndex: 'img',
            width: 60,
          },
          {
            title: '产品名称',
            dataIndex: 'productName',
            width: 120,
          },
          {
            title: '供应商SKU',
            dataIndex: 'ssku',
            width: 140,
          },
          {
            title: '经销商SKU',
            dataIndex: 'sku',
            width: 140,
          },
          {
            title: '规格',
            dataIndex: 'productSpecs',
            width: 140,
          },
          {
            title: '期望交期',
            dataIndex: 'gmtPlanDelivery',
            width: 140,
          },
          {
            title: '交货数',
            dataIndex: 'deliveryAmt',
            width: 70,
          },
          {
            title: '实际交货数',
            dataIndex: 'deliveryRealAmt',
            width: 100,
          },
          {
            title: '交货差额',
            dataIndex: 'deliveryDiffAmt',
            width: 100,
          },

          {
            title: '已入库数',
            dataIndex: 'warehouseRealAmt',
            width: 120,
          },
          {
            title: '退回数',
            dataIndex: 'warehouseReturnAmt',
            width: 120,
          },

          // {
          //   title: '采购数',
          //   dataIndex: 'purchaseAmt',
          //   width: 70,
          // },
          // {
          //   title: '截单数',
          //   dataIndex: 'purchaseCutoffAmt',
          //   width: 70,
          // },

          // {
          //   title: '未交货',
          //   dataIndex: 'purchaseDeliveryStayAmt',
          //   width: 70,
          // },

          {
            title: '税率',
            dataIndex: 'rate',
            width: 60,
          },
          {
            title: '采购单价',
            dataIndex: 'price',
            width: 80,
          },
          {
            title: '实交金额',
            dataIndex: 'deliveryValue',
            width: 120,
          },
          {
            title: '入库金额',
            dataIndex: 'inventoryValue',
            width: 120,
          },
          // {
          //   title: '库存单价',
          //   dataIndex: 'deliveryInventoryPrice',
          //   width: 80,
          // },
          // {
          //   title: '库存成本',
          //   dataIndex: 'deliveryInventoryValue',
          //   width: 80,
          // },
        ],
      })

      const open = () => {
        getDetail()
      }

      const getDetail = async () => {
        const res = await getSupplierDeliveryInfo({ id: props.info.id })
        data.itemInfo = res?.data || {}
      }

      const handleCancel = () => {
        visible.value = false
      }

      const summary = () => {
        let purchaseAmt = 0
        let purchaseValue = 0
        let purchaseCutoffAmt = 0
        let deliveryAmt = 0
        let deliveryRealAmt = 0
        let purchaseDeliveryStayAmt = 0
        let deliveryInventoryValue = 0

        let listArr = data.itemInfo?.billItems || []

        listArr.forEach((e: any) => {
          purchaseAmt += e.purchaseAmt
          purchaseValue += e.purchaseValue
          purchaseCutoffAmt += e.purchaseCutoffAmt
          deliveryAmt += e.deliveryAmt
          deliveryRealAmt += e.deliveryRealAmt
          purchaseDeliveryStayAmt += e.purchaseDeliveryStayAmt
          deliveryInventoryValue += e.deliveryInventoryValue
        })
        return [
          {
            gmtPlanDelivery: '合计',
            purchaseAmt,
            purchaseValue: `￥${purchaseValue}`,
            purchaseCutoffAmt,
            deliveryAmt,
            deliveryRealAmt,
            purchaseDeliveryStayAmt,
            deliveryInventoryValue: `￥${deliveryInventoryValue}`,
          },
        ]
      }

      const download = (url: string) => {
        let a = document.createElement('a')
        a.href = url
        a.click()
      }

      // 合并单元格
      const spanMethodAll = (option: any) => {
        let { column } = option
        if (column.dataIndex === 'img') {
          return { rowspan: 1, colspan: 16 }
        }
      }

      const toCheckDay = (time: any) => {
        let date = new Date(time).valueOf() + 24 * 60 * 60 * 1000
        let newDate = new Date().valueOf()

        let timeStr = date - newDate
        if (timeStr < 0) {
          let daty = Math.abs(timeStr) / (24 * 60 * 60 * 1000)
          return {
            type: false,
            day: Math.ceil(daty),
          }
        } else {
          let daty = Math.abs(timeStr) / (24 * 60 * 60 * 1000)
          return {
            type: true,
            day: Math.ceil(daty),
          }
        }
      }

      const getSpecName = (info: any) => {
        let item: any = info ? JSON.parse(info.productSpecs) : []
        return item.map((e: any) => e.valueCn).join(',')
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleCancel,
        summary,
        download,
        toCheckDay,
        spanMethodAll,
        getSpecName,
      }
    },
  })
</script>

<style lang="less" scoped>
  .arco-col {
    margin-bottom: 5px;
  }

  .detail-item {
    display: flex;

    .label {
      width: 140px;
      text-align: right;
    }
    .value {
      flex: 1;
    }
  }
</style>
